import React from 'react';
import {HashRouter, Route, Link, Switch} from 'react-router-dom';

/**
 * 混合路由组件化开发：路由和组件代码混合在一起；4.0 的一个基本功能
 *
 * 视频说： A <Router> may have only one child ele; 一个 Router 只允许有一个子节点，否则报错
 * 但是 注释 Div 后，并没有报错
 *
 * Route.exact : 开启精准匹配，当 path 与 location.pathname 完全相同时才匹配；否则都会匹配到，多路由同时加载
 *
 * Switch: 只渲染第一个匹配到的 <Route> 或 <Redirect>
 */
export default class Main extends React.Component {
  render() {
    return (
      <HashRouter>
        {/*<div>*/}
        <ul>
          <li>
            <Link to='/'>Home</Link>
          </li>
          <li>
            <Link to="/about">about</Link>
          </li>
          <li>
            <Link to="/about/a">aboutA</Link>
          </li>
        </ul>

        <Switch>
          <Route path='/' component={Home}/>
          <Route path='/about' component={About}/>
          <Route path="/about/a" component={AboutA}/>
        </Switch>
        {/*</div>*/}
      </HashRouter>
    )
  }
}

function Home() {
  return (
    <>
      <h2>Home Content</h2>
    </>
  )
}

function About() {
  return (
    <>
      <h2>About Content</h2>
    </>
  )
}

function AboutA() {
  return (
    <><h2>AboutA Content</h2></>
  )
}

